new Vue({
    el: '#demo',
    data(){
        return{
            type:'4566',
            base1:'',
            imgUrl:'',
        }
    },
    mounted(){
        // this.base1=base1;
        // console.log(baseUrl);

        // console.log(base);
        // this.showPdf('https://yun.xssbdc.com/api/image/pdf/d9546e41befb4f1fbb914364d88c2fb7.pdf');
        this.showPdf('https://yun.xssbdc.com/api/image/pdf/d9546e41befb4f1fbb914364d88c2fb7.pdf')
    },
    methods:{
        showPdf(url) {
            let _this = this;
            let imgArr = [];
            pdfjsLib.workerSrc = 'pdf.worker.js';
            let loadingTask = pdfjsLib.getDocument(url);
            loadingTask.promise.then(function(pdf) {
                console.log('PDF loaded');
                let pageNum = pdf.numPages;
                // console.log(pageNum);
                for (let i=1; i<=pageNum; i++) {
                    pdf.getPage(i).then(function(page) {
                        console.log('Page loaded');

                        let scale = 1;
                        let viewport = page.getViewport(scale);

                        // let canvas = document.getElementById('the-canvas');
                        let canvas = document.createElement("canvas");
                        let context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        let renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        let renderTask = page.render(renderContext);
                        renderTask.then(function () {
                            console.log('Page rendered');
                            let imgUrl = canvas.toDataURL('image/jpeg'); //转换为base64
                            if (imgUrl) {
                                imgArr[i-1] = imgUrl;
                            }
                            //pdf全部画完结束后操作
                            if (imgArr.length==pageNum&&!isEmpty(imgArr)) {
                                // let canvas2 = document.createElement("canvas");
                                let canvas2 = document.getElementById('the-canvas');
                                let context2 = canvas2.getContext('2d');
                                canvas2.height = viewport.height*pageNum;
                                canvas2.width = viewport.width;
                                let count = 0;
                                for (let j=0; j<imgArr.length; j++) {
                                    let IMG = new Image();
                                    IMG.src=imgArr[j];
                                    IMG.width = viewport.width;
                                    IMG.height = viewport.height;
                                    IMG.onload = function () {
                                        context2.drawImage(IMG,0,viewport.height*j);
                                        count++;//确保所有img渲染结束后操作
                                        if (count==pageNum) {
                                            let canvas = document.getElementById('the-canvas');
                                            //赋值给img
                                            _this.imgUrl = canvas.toDataURL('image/jpeg');
                                        }
                                    }
                                }
                            }
                        });
                    });
                }
            }, function (reason) {
                console.error(reason);
            });

            function isEmpty(arr) {
                for(let i=0;i<arr.length;i++) {
                    if(!arr[i])
                        return true;
                }
                return false;
            }
        }
    },
})



